<template>
  <div>
    <div class="top">
      <el-page-header @back="goBack">
        <template #content>
          <span style="font-size: 16px">考评详情</span>
        </template>
      </el-page-header>
    </div>
    <div style="display: flex;padding: 20px;box-sizing: border-box">
      <div class="left">
        <p class="title">基础详情</p>
        <div>
          <p style="margin: 5px 0">{{ storeInfo.assignName }}</p>
          <p style="color:#919398;font-size: 13px;margin-bottom: 5px">编号：{{ storeInfo.assignNo }}</p>
          <p style="color:#919398;font-size: 13px">地址：{{ storeInfo.address }}</p>
        </div>
        <div class="d1">
          <div>
            <p style="color: #919398">得分率</p>
            <p style="font-size:20px;font-weight: bold;margin-top:5px">{{ informationInfo.scoreRate }}%</p>
            <!--            <p style="color: #919398;">考评意见</p>-->
            <!--            <p>无</p>-->
          </div>
          <div>
            <p style="color: #919398">得分</p>
            <p style="font-size:20px;font-weight: bold;margin-top:5px">{{
                informationInfo.patrolScore
              }}/{{ informationInfo.fullScore }}</p>
          </div>
        </div>
        <div class="d2">
          <p style="font-weight: bold;color: #333">考评执行</p>
          <p>巡查人：<span>{{ informationInfo.userName }}</span></p>
          <p>考评模板：<span>{{ informationInfo.templateName }}</span></p>
          <p>提交时间：<span>{{ informationInfo.completeTime }}</span></p>
        </div>
        <div class="d2">
          <p style="font-weight: bold;color: #333">问题单指派</p>
          <p>店铺员工：<span>{{ storeInfo.storeStaffName }}</span></p>
          <p>员工电话：<span>{{ storeInfo.storeStaffPhone }}</span></p>
          <p>一级考核员：<span>{{ informationInfo.userName }}</span></p>
        </div>
      </div>
      <div class="right" style="margin-top: 2px;margin-left: 50px">
        <el-tabs v-model="activeName" @tab-click="handleClick(activeName)">
          <el-tab-pane label="全 部" name="0">
          </el-tab-pane>
          <el-tab-pane label="合 格" name="1">
          </el-tab-pane>
          <el-tab-pane label="不合格" name="2">
          </el-tab-pane>
        </el-tabs>
        <el-table :data="qualifyData">
          <el-table-column type="index" label="序号" width="80"></el-table-column>
          <el-table-column prop="problemName" label="问题项"></el-table-column>
          <el-table-column label="统计维度">
            <template v-slot:default="scope">
              <el-image v-if="scope.row.isQualified==1"
                        src="https://qiniushelves.jiachuangnet.com/renovation/img/V480704hege.f6d520be.png"
                        style="width: 48px"></el-image>
              <el-image v-if="scope.row.isQualified==2"
                        src="https://qiniushelves.jiachuangnet.com/renovation/img/V766133buhege.f911d6d4.png"
                        style="width: 55px"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="recordScore" label="扣分值">
            <template v-slot:default="scope">
              <span v-if="scope.row.isQualified==1">0</span>
              <span v-if="scope.row.isQualified==2">-{{ scope.row.recordScore }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="recordScore" label="总分值"></el-table-column>
          <el-table-column prop="problemRemark" label="备注"></el-table-column>
          <el-table-column label='截图'>
            <template v-slot:default="scope">
              <el-image style="width: 30px;height: 20px" v-for="item in scope.row.problemImg" :src="item"
                        :preview-src-list="[item]"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot:default="scope">
              <el-link @click='intoUnQualify(scope.row)' v-if="scope.row.isQualified==2">
                <i class="el-icon-edit"></i>
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="padding: 20px 0;" align="right" @size-change="handleSizeMessage"
                       @current-change="handleCurrentMessage" :current-page="currentPage"
                       :page-sizes="[10, 20, 30, 40]"
                       layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "assessmentDetail",
  data() {
    return {
      informationInfo: {},
      storeInfo: {},
      activeName: '0',
      total: 0,
      currentPage: 1,
      qualifyData: [],
      pageSize: 10,
      pageNumber: 1
    }
  },
  watch: {
    '$route.query': {
      handler(newQuery) {
        this.fetchUser(newQuery)
      },
      immediate: true
    }
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    fetchUser(val) {
      if(!val.state) return
      const informationD = JSON.parse(sessionStorage.getItem('patorlD'))
      const storeD = JSON.parse(sessionStorage.getItem('storeD'))
      this.storeInfo = storeD
      this.informationInfo = informationD
      this.getQualifyList()
    },
    getQualifyList() {
      let qualify = ""
      if (this.activeName != 0) qualify = this.activeName
      const data = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        patrolRecordId: this.informationInfo.patrolRecordId,
        isQualified: qualify
      }
      this.$api.patrolGetPatrolRecordDetailsVo(data).then(res => {
        res.data.map(el => {
          if (el.problemImg) {
            if (el.problemImg.includes(',')) {
              el.problemImg = el.problemImg.split(',');
            } else {
              el.problemImg = [el.problemImg];
            }
          } else {
            el.problemImg = [];
          }
        });
        this.qualifyData = res.data
        this.total = res.total
      })
    },
    handleClick(val) {
      this.activeName = val
      this.getQualifyList()
    },
    handleSizeMessage(val) {
      this.pageSize = val
      this.getQualifyList()
    },
    handleCurrentMessage(val) {
      this.pageNumber = val
      this.getQualifyList()
    },
    intoUnQualify(val) {
      this.$router.push({
        path:'/unQualifyDetail',
        query:{
          state:'add'
        }
      })
      sessionStorage.setItem('rowVal',JSON.stringify(val))
    }
  }
}
</script>

<style scoped lang="less">
.left {
  width: 20%;
}

.right {
  width: 75%;
}

.d1 {
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  background-color: #eee;
  height: 80px;
  margin-top: 15px;
  border-radius: 5px;
  display: flex;
  justify-content: space-around
}

.d2 {
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  background-color: #eee;
  height: 120px;
  margin-top: 15px;
  border-radius: 5px;

  p {
    font-size: 13px;
    color: #595959;
    margin-bottom: 5px;

    span {
      color: #919398;
    }
  }
}

/deep/ .el-tabs__item.is-active {
  color: #ff6a00;
}

/deep/ .el-tabs__active-bar {
  background-color: #ff6a00;
}

.title {
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 15px;
  font-weight: bold;
  border-bottom: 2px solid #ff6a00;
}

</style>